<template>
  <div class="room-tooltip">
    <a-tooltip color="#184466" placement="bottomRight">
      <template #title>
        <div class="tooltipInfo flex-column">
          <div v-for="item in tipInfo" :key="item.value" @click="selectChange(item)">
            <div
                :error="item.value === 2"
                :nano="item.value === 3"
                :normal="item.value === 1"
                :warn="item.value === 4"
                class="circle"
            />
            {{ item.label }}
            <div v-show="item.select" class="gou">
              <CheckOutlined/>
            </div>
          </div>
        </div>
      </template>
      <!--      <div class="wenhao"/>-->
      <div class="select">
        筛选
        <div class="jiao">
        </div>
      </div>
    </a-tooltip>
  </div>
</template>

<script setup>
import {CheckOutlined} from "@ant-design/icons-vue";
import {ref} from "@vue/reactivity";
const checkValue = ref([1, 2, 3, 4]);

const tipInfo = ref([
  {
    label: "全部已归",
    value: 1,
    color: "#579FFF",
    select: true
  },
  {
    label: "部分已归",
    value: 4,
    color: "#DAA363",
    select: true
  },
  {
    label: "全部未归",
    value: 2,
    color: "#9D1C1C",
    select: true
  },
  {
    label: "空闲",
    value: 3,
    color: "transparent",
    select: true
  },
])
const emit = defineEmits(['checkChange'])
const selectChange = (item) => {
  item.select = !item.select;
  checkValue.value = tipInfo.value.filter(item => {
    return item.select;
  }).map(i => i.value);
  // checkChange();
  emit('checkChange',checkValue.value)
};
defineExpose({
  checkValue
})
</script>

<style lang="less" scoped>
@import "./index.less";

</style>
